<template>
    <div style="border: 1px solid #ccc;padding: 20px;margin: 10px;">
        用户名:<el-input v-model="page.UserName" style="width: 200px;"></el-input>
        <el-button type="primary" @click="GetReport">查询</el-button>
    </div>
   <div style="border: 1px solid #ccc;padding: 20px;margin: 10px;">
      <el-button type="primary" @click="Export">导出</el-button>
   <el-table :data="tableData" style="width: 100%" border>
    <el-table-column  prop="userName" label="姓名\请假月份" width="200" />
    <el-table-column  prop="month1" label="一月" width="100" >
         <template #default="scope">
             <el-link v-if="scope.row.month1!=0"  style="color: red;" @click="viewDetail(scope.row.userName, 1)">{{scope.row.month1}}</el-link>
         </template>
    </el-table-column>
    <el-table-column prop="month2" label="二月" width="100" >
        <template #default="scope">
            <el-link v-if="scope.row.month2!=0"  style="color: red;" @click="viewDetail(scope.row.userName, 2)">{{scope.row.month2}}</el-link>
        </template>
    </el-table-column>
    <el-table-column prop="month3" label="三月" width="100" >
         <template #default="scope">
            <el-link v-if="scope.row.month3!=0"  style="color: red;" @click="viewDetail(scope.row.userName, 3)">{{scope.row.month3}}</el-link>
         </template>
    </el-table-column>
    <el-table-column prop="month4" label="四月" width="100" >
         <template #default="scope">
            <el-link v-if="scope.row.month4!=0"  style="color: red;" @click="viewDetail(scope.row.userName, 4)">{{scope.row.month4}}</el-link>
         </template>
    </el-table-column>
    <el-table-column prop="month5" label="五月" width="100" >
        <template #default="scope">
            <el-link v-if="scope.row.month5!=0"  style="color: red;" @click="viewDetail(scope.row.userName, 5)">{{scope.row.month5}}</el-link>
        </template>
    </el-table-column>
    <el-table-column prop="month6" label="六月" width="100" >
        <template #default="scope">
             <el-link v-if="scope.row.month6!=0"  style="color: red;" @click="viewDetail(scope.row.userName, 6)">{{scope.row.month6}}</el-link>
        </template>
    </el-table-column>
    <el-table-column prop="month7" label="七月" width="100" >
        <template #default="scope">
            <el-link v-if="scope.row.month7!=0"  style="color: red;" @click="viewDetail(scope.row.userName, 7)">{{scope.row.month7}}</el-link>
        </template>
    </el-table-column>
    <el-table-column prop="month8" label="八月" width="100" >
        <template #default="scope">
            <el-link v-if="scope.row.month8!=0"  style="color: red;" @click="viewDetail(scope.row.userName, 8)">{{scope.row.month8}}</el-link>
        </template>
    </el-table-column>
    <el-table-column prop="month9" label="九月" width="100" >
        <template #default="scope">
            <el-link v-if="scope.row.month9!=0"  style="color: red;" @click="viewDetail(scope.row.userName, 9)">{{scope.row.month9}}</el-link>
        </template>
    </el-table-column>
    <el-table-column prop="month10" label="十月" width="100" >
        <template #default="scope">
            <el-link v-if="scope.row.month10!=0"  style="color: red;" @click="viewDetail(scope.row.userName, 10)">{{scope.row.month10}}</el-link>
        </template>
    </el-table-column>
    <el-table-column prop="month11" label="十一月" width="100" >
        <template #default="scope">
            <el-link v-if="scope.row.month11!=0"  style="color: red;" @click="viewDetail(scope.row.userName, 11)">{{scope.row.month11}}</el-link>
        </template>
    </el-table-column>
    <el-table-column prop="month12" label="十二月" width="100" >
        <template #default="scope">
            <el-link v-if="scope.row.month12!=0"  style="color: red;" @click="viewDetail(scope.row.userName, 12)">{{scope.row.month12}}</el-link>
        </template>
    </el-table-column>
  </el-table>
  <!-- 工时详情列表 -->
  <el-dialog v-model="dialogVisible" title="请假工时明细"width="1000">
     <el-table :data="DetailData" style="width: 100%" border>
    <el-table-column fixed type="index" label="序号" width="150" />
    <el-table-column prop="userName" label="姓名" width="120" />
    <el-table-column prop="deparmentName" label="部门" width="120" />
    <el-table-column prop="leaveTypeName" label="请假类别" width="120" />
    <el-table-column prop="startTime" label="请假时间" width="200" >
      <template #default="scope">
        {{moment(scope.row.startTime).format("YYYY-MM-DD")}}至{{moment(scope.row.endTime).format("YYYY-MM-DD")}}
      </template>
    </el-table-column>
    <el-table-column prop="hours" label="总工时" width="120" >
      <template #default="scope">
        {{scope.row.hours}}小时
      </template>
    </el-table-column>
    <el-table-column prop="endTime" label="报到时间" width="180">
      <template #default="scope">
          {{moment(scope.row.endTime).format("YYYY-MM-DD")}}
      </template>
    </el-table-column>
    <el-table-column prop="reason" label="请假事由" width="120" />
    <el-table-column prop="approvaler" label="部门领导" width="120" />
    <el-table-column prop="status" label="审批状态" width="120" >
      <template #default="scope">
          <el-tag type="primary" v-if="scope.row.status==false">待审批</el-tag>
          <el-tag type="warning" v-if="scope.row.status==true">已审批</el-tag>
      </template>
    </el-table-column>
     <el-table-column prop="yeNo"   label="审批结果" width="120" >
      <template #default="scope">
          <el-tag type="success" v-if="scope.row.yeNo==false">通过</el-tag>
          <el-tag type="danger" v-if="scope.row.yeNo==true">驳回</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="remark" label="审批意见" width="120" />
    <el-table-column prop="createTime" label="创建时间" width="180" >
      <template #default="scope">
          {{moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")}}
      </template>
    </el-table-column>
  </el-table>
  </el-dialog>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import moment  from 'moment'
import {ref,reactive, onMounted, useId,nextTick,watch}from 'vue'
import { Read,Write } from '@/http/interceptors'

//#region  获取请假报表

const tableData=ref([])
const page =reactive({
    UserName:""
})
onMounted(()=>{
    GetReport();
})

const GetReport =()=>{
    Read.get("/api/ApprovalGetReport",{params:page}).then(res=>{
        tableData.value=res.data.data
    })
}
//#endregion

//#region  请假工时明细
//弹窗
const dialogVisible = ref(false)

const DetailData=ref([])
//查询详情
const viewDetail=(UserName:any,Month:any)=>{
  dialogVisible.value = true
  Read.get("/api/ApprovalGetReportDetail",{params:{UserName:UserName,Month:Month}}).then(res=>{
     DetailData.value=res.data.pageData
  })
}

//#endregion

//#region  导出
const Export=()=>{
   location.href="http://localhost:5194/api/ApprovalExportExcel"
}
//#endregion
</script>

<style scoped>

</style>